﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="openMap.aspx.cs" Inherits="Demos_openMap" %>
<%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxDocking" Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>
<%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxPopupControl" Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    

    <head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 

        <title>OpenLayer Page</title> 
        <link rel="stylesheet" href="css/ol.css" type="text/css"/>
        
    </head>
    <body>
        <form id="form1" runat="server">
               <div id="googlemap"  style="width: 100%;height: 100%"></div>
        </form>

        <script src="Scripts/ol.js" type="text/javascript"></script>
        <script type="text/javascript">
            // <![CDATA[

            var layers = [
                new ol.layer.Tile({
                    name: 'baseLayer',
                    source: new ol.source.MapQuest({ layer: 'osm' })
                })

            ];

            var mousePositionControl = new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(4),
                projection: 'EPSG:4326',
                //注释掉下面两行默认在地图内显示鼠标经过经纬度
                /*      className: 'custom-mouse-position',
                 target: document.getElementById('info'),*/
                undefinedHTML: '&nbsp;'
            });


            var openmap = new ol.Map({
                controls: ol.control.defaults({
                    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                        collapsible: true
                    })
                }).extend([
                    new ol.control.ScaleLine(),
                    mousePositionControl,
                    new ol.control.Rotate()
                ]),
                target: "googlemap",
                layers: layers,
                view: new ol.View({
                    center: ol.proj.transform([110.332, 20.0246], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 10
                })
            });
            // ]]>
        </script>
    </body>
</html>